<!--
  @desc 自定义 table 组件，通过传入的 column 配置，生成列表，并且固定表格展示区域
  @author 石艳军
  @date 2022-03-30
  属性:
    - loading { boolean } 加载loading
    - columns { array } 表格列配置项，必传项
      {
        - type { string } 对应列的类型，可选项: selection | index | expand。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
        - title { string } 显示的标题
        - renderHeader { Function(h, { column, $index }) } 列标题 Label 区域渲染使用的 Function
        - dataIndex { string } 对应列内容的字段名,唯一值
        - width { number } 对应列的宽度
        - minWidth { number } 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
        - fixed { string, boolean } 列是否固定在左侧或者右侧，true 表示固定在左侧; 可选值: true | left | right
        - reserveSelection { boolean } 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）,默认为: false
        - showOverflowTooltip { boolean } 当内容过长被隐藏时显示 tooltip, 默认: true
        - align { string } 对齐方式, 可选值：left/center/right, 默认: center
        - headerAlign { string } 表头对齐方式，若不设置该项，则使用表格的对齐方式, 可选值：left/center/right, 默认: center
        - scopedSlots { object } 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: 'XXX'}
      }
    - dataSource { Array } 数据源对象，必传项
    - stripe { boolean } 是否为斑马纹 table
    - border { boolean } 是否带有纵向边框
    - size { boolean } Table 的尺寸
    - fit { boolean } 列的宽度是否自撑开, 默认为: true
    - rowKey { Function(row)/String } 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
                          类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
    - showSummary { boolean } 是否在表尾显示合计行
    - sumText { string } 合计行第一列的文本, 默认文本: 合计
    - summaryMethod { Function({ columns, data }) } 自定义的合计计算方法
    - spanMethod { Function({ row, column, rowIndex, columnIndex }) } 合并行或列的计算方法
    - isPagination { boolean } 是否显示分页
    - current { number } 当前页
    - pageSizes { number[] } 每页显示个数选择器的选项设置; [10, 20, 30, 40, 50, 100]
    - defaultPageSize { number } 默认显示的每页数量
    - total { number } 总条目数
  使用方式:
    const columns = [
      { type: 'selection', reserveSelection: true, fixed: 'left' },
      { type: 'index', title: '序号', width: 60, fixed: 'left' },
      { dataIndex: 'riskUnitName', title: '单位名称', width: 200, fixed: 'left', scopedSlots: { customRender: 'riskUnitName' } },
      { dataIndex: 'economicTypeName', title: '行业经济分类' },
      { dataIndex: 'action', title: '操作', width: 100, fixed: 'right', scopedSlots: { customRender: 'action' } },
    ];

    <base-table
        ref="multipleTable"
        border
        :loading="loading"
        :data-source="tableData"
        :columns="tableColumns"
        :row-key="row => row.riskUnitId"
        :current="form.current"
        :total="total"
        @size-change="curSize"
        @current-change="curChange"
        @selection-change="handleSelectionChange"
      >
        <template #riskUnitName="scope">
          <span @click="onAction(scope.row, 0,-1)" class="updateText">{{ scope.row.riskUnitName }}</span>
        </template>

        <template #action="scope">
          <el-button icon="iconfont iconxiugai" size="small" @click="onAction(scope.row, 1, scope.row.riskStatus)">修改</el-button>
        </template>
     </base-table>
-->
<template>
  <div class="base-table" ref="baseTableWrapperRef">
    <el-table
      ref="baseTableRef"
      v-loading="loading"
      :data="dataSource"
      :stripe="stripe"
      :border="border"
      :height="tableHeight"
      :size="size"
      :fit="fit"
      :highlight-current-row="true"
      :row-key="rowKey"
      :show-summary="showSummary"
      :sum-text="sumText"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      :default-expand-all="defaultExpandAll"
      :expand-row-keys="expandRowKeys"
      :indent="indent"
      :lazy="lazy"
      :load="load"
      :tree-props="treeProps"
      @sort-change="({ column, prop, order })=> $emit('sort-change', column, prop, order)"
      @selection-change="selection => $emit('selection-change', selection)"
      @expand-change="(row, expanded) => $emit('expand-change', row, expanded)"
    >
      <template v-for="(column, index) in columns" >
        <el-table-column
          v-if="column.scopedSlots && column.scopedSlots.customRender"
          :key="column.key || index"
          :prop="column.dataIndex"
          :class-name="column.className"
          :label-class-name="column.labelClassName"
          :label="column.title"
          :render-header="column.renderHeader"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :align="column.align"
          :header-align="column.headerAlign"
          :selectable="column.selectable"
          :sortable="column.sortable"
          :sort-method="column.sortMethod"
          :reserve-selection="column.reserveSelection"
        >
          <template slot-scope="scope">
            <slot :name="column.scopedSlots.customRender" :row="scope.row" :$index="scope.$index"></slot>
          </template>
          <template :slot="column.scopedSlotsHeader && column.scopedSlotsHeader.customRender ? 'header' : '' " slot-scope="scope">
            <slot :name="column.scopedSlotsHeader.customRender" :column="scope.column" :$index="scope.$index"></slot>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :key="column.key || index"
          :type="column.type"
          :class-name="column.className"
          :label-class-name="column.labelClassName"
          :prop="column.dataIndex"
          :label="column.title"
          :sortable="column.sortable"
          :render-header="column.renderHeader"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :align="column.align"
          :header-align="column.headerAlign"
          :selectable="column.selectable"
          :sort-method="column.sortMethod"
          :reserve-selection="column.reserveSelection"
        >
          <template :slot="column.scopedSlotsHeader && column.scopedSlotsHeader.customRender ? 'header' : '' " slot-scope="scope">
            <slot :name="column.scopedSlotsHeader.customRender" :column="scope.column" :$index="scope.$index"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <el-pagination
      v-if="isPagination"
      :current-page="pageIndex"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :small="paginationSmall"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :pager-count="pagerCount"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'base-table',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    height: {
      type: Number,
    },
    // 是否为斑马纹 table
    stripe: {
      type: Boolean,
      default: false,
    },
    // 是否带有纵向边框
    border: {
      type: Boolean,
      default: false,
    },
    // Table 的尺寸
    size: {
      type: String,
      default: 'medium',  // medium | small | mini
    },
    // 列的宽度是否自撑开
    fit: {
      type: Boolean,
      default: true,
    },
    rowKey: {
      type: [Function, String],
    },
    // 是否在表尾显示合计行
    showSummary: {
      type: Boolean,
      default: false,
    },
    // 合计行第一列的文本
    sumText: {
      type: String,
      default: '合计',
    },
    // 自定义的合计计算方法
    summaryMethod: {
      type: Function,
    },
    // 合并行或列的计算方法
    spanMethod: {
      type: Function,
    },

    /**
     * 以下为树形结构配置项
     */
    // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
    expandRowKeys: {
      type: Array,
    },
    // 展示树形数据时，树节点的缩进,单位: px
    indent: {
      type: Number,
      default: 16,
    },
    // 是否懒加载子节点数据
    lazy: {
      type: Boolean,
      default: false,
    },
    // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
    // Function(row, treeNode, resolve)
    load: {
      type: Function,
    },
    // 渲染嵌套数据的配置选项 { hasChildren: 'hasChildren', children: 'children' }
    treeProps: {
      type: Object,
    },

    /**
     * 以下为分页配置项
     */
    // 是否有分页
    isPagination: {
      type: Boolean,
      default: true,
    },
    // 当前页
    current: {
      type: Number,
      default: 1,
    },
    // 每页显示个数选择器的选项设置
    pageSizes: {
      type: Array,
      default: () => ([10, 20, 50, 100]),
    },
    defaultPageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    // 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
    pagerCount: {
      type: Number,
      default: 7,
    },
    // 是否使用小型分页样式
    paginationSmall: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      tableHeight: 0,
    };
  },

  watch: {
    current: {
      handler(val) {
        if (val) {
          this.pageIndex = val;
        }
      },
      immediate: true,
    },
    columns: {
      handler(list) {
        if (list) {
          list.forEach(item => {
            item.minWidth = item.minWidth || '50px';
            if (_.isUndefined(item.showOverflowTooltip)) {
              // 默认超出部分 tooltip 提示
              item.showOverflowTooltip = true;
            }
            if (['selection', 'index'].includes(item.type)) {
              item.align = 'center';
              item.headerAlign = 'center';
            }
          });
        }
      },
      immediate: true,
      deep: true,
    },
    defaultPageSize: {
      handler(val) {
        if (val) {
          this.pageSize = val;
        }
      },
      immediate: true,
    },
  },

  beforeMount() {
    if (this.height) {
      this.tableHeight = this.height;
    }
  },

  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);

    // todo: 仅用于开发环境中，手动切换语言时触发
    this.$Bus.$on('base-table-resize', () => {
      this.handleResize();
    });
  },

  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    this.$Bus.$off('base-table-resize');
  },

  methods: {
    // 判断是否是 ie 浏览器
    isIE() {
      return !!(window.ActiveXObject || 'ActiveXObject' in window);
    },

    handleResize() {
      const wrapperHeight = this.$refs['baseTableWrapperRef'].offsetHeight;
      // 处理 IE 浏览器表格宽度没有继承页面宽度 100%，导致表格撑开整个页面
      if (this.isIE()) {
        this.$refs['baseTableRef'].$el.style.width = this.$refs['baseTableWrapperRef'].offsetWidth + 'px';
      }

      this.$nextTick(() => {
        if (!this.height) {
          this.tableHeight = this.isPagination ? (wrapperHeight - 44) : wrapperHeight;
        }

        this.doLayout();
      });
    },

    doLayout() {
      this.$refs['baseTableRef'].doLayout();
    },

    /**
     * 清空用户的选择
     */
    clearSelection() {
      this.$refs['baseTableRef'].clearSelection();
    },

    /**
     * 清空用户的排序
     */
    clearSort() {
      this.$refs['baseTableRef'].clearSort();
    },

    /**
     * 设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态
     * @param row
     */
    setCurrentRow(row) {
      this.$refs['baseTableRef'].setCurrentRow(row);
    },

    /**
     * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
     * @param row
     * @param selected
     */
    toggleRowSelection(row, selected) {
      this.$refs['baseTableRef'].toggleRowSelection(row, selected);
    },

    /**
     * 用于多选表格，切换所有行的选中状态
     */
    toggleAllSelection() {
      this.$refs['baseTableRef'].toggleAllSelection();
    },

    /**
     *
     * @param row
     * @param expanded
     */
    toggleRowExpansion(row, expanded) {
      this.$refs['baseTableRef'].toggleRowExpansion(row, expanded);
    },

    /**
     * 切换当前显示的数据的条数
     * @param pageSize
     */
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageIndex = 1;
      this.$emit('size-change', pageSize);
    },

    /**
     * 切换分页页码
     * @param pageIndex
     */
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.$emit('current-change', pageIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
.base-table {
  width: 100%;
  height: 100%;
  //flex: 1;
  //display: flex;
  //flex-direction: column;
  //justify-content: space-between;

  .el-table {
    width: 100%;
    height: calc(100% - 44px);

    &.el-table--small {
      ::v-deep .el-table__cell {
        height: 45px;
      }

      ::v-deep .el-table__header-wrapper,
      ::v-deep .el-table__fixed-header-wrapper {
        thead {
          tr, th {
            height: 40px;
          }
        }
      }
    }

    &.el-table--scrollable-x {
      /* TODO bugfix: 处理首次加载时，固定列遮挡横向滚动条问题导致在固定列下方无法拖动滚动条, 如果列表中有合计项，则不适用该方法 */
      ::v-deep .el-table__fixed {
        height: auto !important;
        bottom: 8px !important;
      }
    }

    ::v-deep .el-table__cell {
      height: 55px;
      color: #5D6B81;
    }

    ::v-deep .el-table__header-wrapper,
    ::v-deep .el-table__fixed-header-wrapper {
      thead {
        tr, th {
          background-color: #F2F2F2;
          color: #23313e ;
          height: 50px;
        }
      }
    }

    ::v-deep .el-table__body-wrapper {
      th, td {
        &.el-table-column--selection {
          .cell {
            padding-left: 10px;
            padding-right: 10px;
          }
        }
      }
    }

    &.el-table--border {
      ::v-deep td, th {
        border-right: 1px solid #ddd;
      }
    }
  }

  .el-pagination {
    width: 100%;
    height: 32px;
    margin-top: 12px;
    text-align: right;
    padding: 0 8px;
  }
}

</style>
